<template>
  <div class="box">
    <div class="left">
      <div class="top">
        <div class="map">
          <map-chart></map-chart>
        </div>
        <div class="device-pie">
          <div class="type">
            <box-type></box-type>
          </div>
          <div class="model">
            <box-model></box-model>
          </div>
        </div>
      </div>
      <div class="footer">
        <div>
          <project></project>
        </div>
        <div>
          <days></days>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="header">
        <div class="header-main">
          <div class="access">
            <access :deviceData="deviceData"></access>
          </div>
          <div class="online">
            <on-line :deviceData="deviceData"></on-line>
          </div>
        </div>
        <div class="abnormal">
          <abnormal :deviceData="deviceData"></abnormal>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import onLine from './onLine.vue';
import abnormal from './abnormal.vue'
import access from './access.vue'
import connect from './connect.vue';
import boxType from './type.vue';
import boxModel from './model.vue';
import project from './project.vue';
import days from './days.vue';
import mapChart from './mapChart.vue'
import { getIsDevice, getAllDevice } from '@/api/home/index.js';

export default {
  name: 'home',
  components: { mapChart, onLine, abnormal, access, connect, boxType, boxModel, project, days },
  data() {
    return {
      deviceData: {}
    };
  },
  computed: {},
  created() {
    // if (process.client){}
    this.getDevice()
    // this.initWebSocket('admin');
  },
  mounted() { },
  beforeCreate() { },
  beforeMount() { },
  methods: {
    async getDevice() {
      const res = await getAllDevice();
      if (res.code == 200) {
        this.getIsDevice(res.data)
      }
    },
    async getIsDevice(data) {
      const res = await getIsDevice();
      if (res.code == 200) {
        this.deviceData = Object.assign(data, res.data)
        // this.deviceData = res.data;
      }
    },
  },
};
</script>
<style lang='scss' scoped>
.box {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  padding: 20px;
}

.left {
  height: 100%;
  flex: 3;
  margin-right: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-content: center;

  // padding: 30px;
  .top {
    flex: 2;
    display: flex;
    // margin-bottom: 20px;

    .map {
      flex: 7;
      margin-right: 20px;
    }

    .device-pie {
      display: flex;
      flex-direction: column;
      // padding: 10px 0;
      flex: 3;

      >div {
        flex: 1;
        // margin-bottom: 20px;
      }

      .type {
        margin-bottom: 10px;
      }

      .model {
        margin-top: 10px;
      }
    }
  }
}

.right {
  margin-left: 12px;
  flex: 1;
}

.header {
  display: flex;
  height: 100%;
  // padding-bottom: 35px;
  flex-direction: column;
  // justify-content: space-between;

  .header-main {
    display: flex;
    flex-direction: column;
    flex: 2;

    .access {
      flex: 1;
      margin-bottom: 10px;
      background-image: url('../../assets/images/home_icon.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      height: 100%;
      border-radius: 12px;
      background-color: rgba(0, 0, 0, 0.24);
    }

    .online {
      flex: 1;
      margin-top: 10px;
      background-image: url('../../assets/images/home_icon1.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
      height: 100%;
      border-radius: 12px;
      background-color: rgba(0, 0, 0, 0.24);
    }
  }


  .abnormal {
    flex: 1;
    margin-top: 20px;
    background-image: url('../../assets/images/home_icon2.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    height: 100%;
    border-radius: 12px;
    background-color: rgba(0, 0, 0, 0.24);
  }
}

.device-pie,
.map,
.footer {
  >div {
    height: 100%;
    border-radius: 12px;
    background-color: rgba(0, 0, 0, 0.24);
    // box-shadow: 1px 0px 5px 5px rgba(228, 230, 225, .6);
    // -webkit-box-shadow: 1px 0px 5px 5px rgba(228, 230, 225, .6);

  }
}

.footer {
  flex: 1;
  display: flex;
  // height: 300px;
  width: 100%;
  margin-top: 20px;

  >div {
    margin-right: 20px;
    flex: 1;
  }

  >div:last-child {
    margin-right: 0;
  }
}
</style>